<template>
	<view>
		<NavBar text='注册'/>
		<view style="width: 100%; height: 100rpx;"></view>
		<view class="backgroundz">
			<view style="width: 100%; height: 100rpx;"></view>
			<view style="width: 90%; margin:0 auto;">
				<view class="textphone">手机号</view>
				  <u--input
				    placeholder="请输入手机号"
				    border="bottom"
				    v-model="phone"
					type='number'
				  ></u--input>
				  <view style="margin-top:40rpx;">
					  <u-input
					    placeholder="请输入验证码"
					    border="bottom"
					    v-model="yzm"
					  >
					  <template slot="suffix">
					  					  <view :style="{color:color}" @click="yzmClick">
					  						{{codetext}}  
					  					  </view>
					  	</template>
					  </u-input>
				  </view>
				 <view style="margin-top:40rpx;">
					 <u-input
					   placeholder="请输入密码"
					   border="bottom"
					   v-model="password"
					   :type="passwordtype"
					 >
						<template slot="suffix">
							<view v-if="passwordtype == 'password'">
								<image @click="passwordtype = 'text'" style="width: 30rpx; height: 30rpx;" src="/static//login/by.png"></image>
							</view>
							<view v-if="passwordtype == 'text'">
								<image @click="passwordtype = 'password'" style="width: 30rpx; height: 30rpx;" src="/static/login//u39.png"></image>
							</view>
						</template>
					 </u-input>
				 </view>
				  <view style="margin-top:40rpx;">
					  <u-input
					    placeholder="请确认确认密码"
					    border="bottom"
					    v-model="qrpassword"
						:type="passwordtype_qr"
					  >
						<template slot="suffix">
							<view v-if="passwordtype_qr == 'password'">
								<image @click="passwordtype_qr = 'text'" style="width: 30rpx; height: 30rpx;" src="/static//login/by.png"></image>
							</view>
							<view v-if="passwordtype_qr == 'text'">
								<image @click="passwordtype_qr = 'password'" style="width: 30rpx; height: 30rpx;" src="/static/login//u39.png"></image>
							</view>
						</template>
					  </u-input>
				  </view>
				  <view style="margin-top:50rpx;">
					  <u-button type="primary" text="注册" shape='circle'></u-button>
				  </view>
				  
			</view>
		</view>
	</view>
</template>

<script>
	import NavBar from '@/components/NarBar.vue'
	export default{
		components:{
			NavBar
		},
		data(){
			return{
				phone:'',
				yzm:'',
				password:'',
				qrpassword:'',
				codetext:'获取验证码',
				number:60,
				Disable:false,
				color:'#8ba2e0',
				passwordtype:'password',
				passwordtype_qr:'password'
			}
		},
		methods:{
			// 获取验证码
			yzmClick(){
				if(this.Disable == false){
					this.Disable = true
					this.color = '#cecece'
					let time = setInterval(() => {
						this.number--
						this.codetext = `${this.number}秒后重新获取`
						if (this.number == 0) {
							this.Disable = false
							this.codetext = '获取验证码'
							clearInterval(time)
							this.color = '#8ba2e0'
						}
					}, 1000)
				}
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #f7f7f7;
	}
	.backgroundz{
		width: 90%;
		height: 85vh;
		margin: 0 auto;
		margin-top:50rpx;
		background-color: #fff;
		border-radius: 0;
		border: solid #cecece 1rpx;
		.textphone{
			margin-left: 9px;
			font-size: 25rpx;
			color:#b2b2b2;
		}
	}
</style>